<template>
	<view class="order-details">
		<NavBar title="订单详情"/>
		<view class="content">
			<view class="title"> {{statusName}} </view>
			<!-- 用户信息 -->
			<UserPercent :member="orderInfo.member" :name="orderInfo.addressee_name" :tel="orderInfo.addressee_telphone" :address="orderInfo.address" />
			<view class="order-status" @tap="logisticsDetailsRef.open()">
				<view class="status-name">
					<view class="name"> {{expressInfo[orderInfo.rider_status]?.title}} </view>
					<view class="complete-time"> {{expressInfo[orderInfo.rider_status]?.time}} </view>
				</view>
				<image class="status-right" src="/static/icon/order/right.png" />
			</view>
			<!-- 商品信息 -->
			<view class="goods-list" v-for="item in orderInfo.item" :key="item">
				<OneGoodsItem :goodsInfo="item"/>
				<view class="goods-intro">
					<view class="label"> 备注 </view>
					<view class="intro"> {{item.note?item.note:'暂无备注'}} </view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="order-item">
					<view class="label"> 订单编号 </view>
					<view class="value">
						{{orderInfo.order_sn}} 
						<image class="copy" src="/static/icon/order/copy.png" @tap="copy(orderInfo.order_sn)" />
					</view>
				</view>
				<view class="order-item">
					<view class="label"> 下单时间 </view>
					<view class="value"> {{orderInfo.create_time}} </view>
				</view>
				<view class="order-item" v-if="orderInfo.pay_type">
					<view class="label"> 支付方式 </view>
					<view class="value"> {{payType}} </view>
				</view>
				<view class="order-item">
					<view class="label"> 预约送货时间 </view>
					<view class="value"> {{orderInfo.pick_time?orderInfo.pick_time:'暂无'}} </view>
				</view>
				<view class="order-item" v-if="orderInfo.shipments==1">
					<view class="label"> 接单时间 </view>
					<view class="value"> {{orderInfo.accept_time?orderInfo.accept_time:'暂无'}} </view>
				</view>
				<view class="order-item" v-if="orderInfo.shipments==1">
					<view class="label"> 到店时间 </view>
					<view class="value"> {{orderInfo.take_time?orderInfo.take_time:'暂无'}} </view>
				</view>
				<view class="order-item" v-if="orderInfo.shipments==1">
					<view class="label"> 取货时间 </view>
					<view class="value"> {{orderInfo.shop_time?orderInfo.shop_time:'暂无'}} </view>
				</view>
				<view class="order-item" v-if="orderInfo.shipments==1">
					<view class="label"> 收货时间 </view>
					<view class="value"> {{orderInfo.sent_time?orderInfo.sent_time:'暂无'}} </view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods-info">
				<view class="goods-item">
					<view class="label"> 商品金额 </view>
					<view class="value price"> ￥{{orderInfo.goods_amount}} </view>
				</view>
				<view class="goods-item">
					<view class="label"> 配送方式 </view>
					<view class="value"> {{orderInfo.shipments==1?'同城配送':'到店自提'}} </view>
				</view>
				<view class="goods-item" v-if="orderInfo.shipments == 1">
					<view class="label"> 配送费 </view>
					<view class="value price"> +￥{{orderInfo.delivery_money}} </view>
				</view>
				<view class="goods-item">
					<view class="label"> 实付金额 </view>
					<view class="value price"> ￥{{orderInfo.pay_amount}} </view>
				</view>
				<view class="goods-item">
					<view class="label"> 订单状态 </view>
					<view class="value price" v-if="orderInfo.status==7||orderInfo.status==8"> {{statusName}}，￥{{orderInfo.refund.refund_amount}} </view>
					<view class="value price" v-else> {{statusName}} </view>
				</view>
				<view class="goods-item" v-if="orderInfo.status==7||orderInfo.status==8">
					<view class="label"> 退款原因 </view>
					<view class="value"> {{orderInfo.refund.refund_cause}} </view>
				</view>
				<view class="goods-item" v-if="orderInfo.status==7||orderInfo.status==8">
					<view class="label"> 审核备注 </view>
					<view class="value"> {{orderInfo.refund.admin_msg}} </view>
				</view>
				
			</view>
			<view class="btn-box">
				<view class="btn" v-if="(orderInfo.status==5||orderInfo.status==6)&&orderInfo.is_member_comment==0"> 评价用户 </view>
				<view class="btn" v-if="orderInfo.status==6"> 查看评价 </view>
				<view class="btn confirm" v-if="orderInfo.status == 7" @tap="confirmRefund"> 确认退款 </view>
				<view class="btn confirm" v-if="orderInfo.status == 4" @tap="confirmSend"> 确认送达 </view>
			</view>
		</view>
		<LogisticsDetails ref="logisticsDetailsRef" :status="orderInfo.rider_status" :list="expressInfo"/>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import UserPercent from './components/UserPercent.vue';
	import OneGoodsItem from '@/components/OneGoodsItem.vue';
	import OrderDetailsItem from '@/components/OrderDetailsItem.vue';
	import LogisticsDetails from './components/LogisticsDetails.vue';
	import { GetOrderDetailsApi, ConfirmRefundApi, ConfirmSendApi } from '@/service/shop.js'
	const logisticsDetailsRef = ref()
	const statusName = computed(() => {
		// -1已取消 0:待付款,1:待发货/待接单/待核销(已付款), 4:已发货/已接单(配送中),5:待评价,6:已完成 7:退款申请中 8:退款成功
		let name = ''
		switch(orderInfo.value.status) {
			case 0:
				name = '待付款'
				break;
			case 1:
				if(orderInfo.value.shipments == 1) {
					name = '待接单'
				} else {
					name = '待提货'
				}
				break;
			case 3:
				name = '已接单'
				break;
			case 4:
				name = '配送中'
				break;
			case 5:
				name = '待评价'
				break;
			case 6:
				name = '已完成'
				break;
			case 7:
				name = '退款中'
				break;
			case 8:
				name = '已退款'
				break;
		}
		return name
	})
	const payType = computed(() => {
		let name = ''
		switch(orderInfo.value.pay_type) {
			case 'wechat':
				name = '微信支付'
				break;
			case 'deposit':
				name = '测试余额支付'
				break;
			case 'alipay':
				name = '支付宝支付'
				break;
		}
		return name
	})
	const orderInfo = ref({
		status: '',
		address: '',
		addressee_name: '',
		addressee_telphone: '',
		create_time: '',
		note: '',
		order_sn: '',
		shipments: '',
	})
	const expressInfo = ref([])
	// 确认送达
	const confirmRefund = () => {
		const { id, refund } = orderInfo.value
		ConfirmRefundApi({order_id: id, refund_id: refund.id}).then(res => {
			console.log(res);
			getApp().globalData.toast('操作成功')
		})
	}
	// 确认送达
	const confirmSend = () => {
		ConfirmSendApi({order_id: orderInfo.value.id}).then(res => {
			getApp().globalData.toast('操作成功')
			orderInfo.value.status = 5
		})
	}
	const getOrderInfo = (order_id) => {
		GetOrderDetailsApi({order_id}).then(res => {
			orderInfo.value = res
			expressInfo.value = [
				{ title: orderInfo.value.shipments==2?'待提货':'已发布配送单', time: res.create_time },
				{ title: '骑手已接单', time: res.accept_time },
				{ title: '骑手已到店', time: res.shop_time },
				{ title: '骑手已取货', time: res.take_time },
				{ title: '订单已送达', time: res.sent_time }
			]
		})
	}
	const copy = (info) => {
	  uni.setClipboardData({
	  	data: info,
	  	success:() => getApp().globalData.toast('复制成功')
	  });
	}
	onLoad((e) => {
		const { id }  = e
		getOrderInfo(id)
	})
</script>

<style scoped lang="scss">
	.order-details {
		.content {
			padding: 10px 12px 67px;
		}
		.title {
			color: #3D3D3D;
			font-size: 18px;
			font-weight: 500;
			line-height: 22px;
			margin-bottom: 12px;
		}
		.order-status {
			border-radius: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			padding: 13px 12px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.status-name {
				.name {
					color: #333333;
					font-size: 16px;
					font-weight: 500;
					line-height: 20px;
					margin-bottom: 10px;
				}
				.complete-time {
					color: #999999;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
			.status-right {
				width: 14px;
				height: 14px;
			}
		}
		.goods-list {
			padding: 10px 12px;
			border-radius: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			.goods-intro {
				.label {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 19px;
					margin-bottom: 8px;
				}
				.intro {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
		.order-info {
			padding: 20px 12px 10px;
			background-color: #fff;
			color: #999999;
			border-radius: 10px;
			margin-bottom: 10px;
			.order-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 12px;
				&:nth-last-of-type(1) {
					margin-bottom: 0;
				}
				.label {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 19px;
				}
				.value {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 17px;
					.copy {
						width: 16px;
						height: 16px;
					}
				}
			}
		}
		.goods-info {
			border-radius: 10px;
			background-color: #fff;
			padding: 20px 12px 10px;
			.goods-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 12px;
				.label {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 19px;
				}
				.value {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 17px;
				}
				.price {
					color: #FF3B1E;
				}
			}
			.goods-intro {
				.label {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 19px;
					margin-bottom: 8px;
				}
				.intro {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
		.btn-box {
			display: flex;
			justify-content: end;
			padding: 10px 12px;
			background-color: #FFFFFF;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			.btn {
				width: 80px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
				font-size: 14px;
				font-weight: 400;
				background: #FFFFFF;
				border-radius: 151px;
				border: 1px solid #999999;
				box-sizing: border-box;
			}
			.confirm {
				border: none;
				color: #FFFFFF;
				margin-left: 10px;
				background: #FF3B1E;
			}
		}
	}
</style>
